import { defineComponent, onMounted, ref, reactive, watch, computed } from "vue";
import styles from "./orderSearch.module.scss";

export default defineComponent({
  setup() {
    const state = reactive({
        show:false,
        cardType:"请选择类型",
        columns:[
          {
            text:"身份证",
            value:1,
          },
          {
            text:"护照",
            value:2,
          }
        ]
    } as any)
    const confirm = ({ selectedValue, selectedOptions }:any) => {
      // state.show = false;
      state.cardType = selectedOptions[0].text;
    }
    return () => (
      <div class={styles.orderSearch}>
          <div class={styles.head_box}>
            <nut-image src={require("@/assets/images/orderSearchBg.png")}></nut-image>
            <div class={styles.title_top_box}>查询参保信息</div>
            <div class={styles.title_bottom_box}>支持缴费人或参保人查询关联订单信息</div>
          </div>
          <div class={styles.body_card_box}>
              <div class={styles.card_box}>
                 <div class={styles.card_row_box}>
                    <div class={styles.card_row_left_box}>
                       <span>姓名</span>
                    </div>
                    <div class={styles.card_row_right_box}>
                      <nut-input border={false} placeholder="请输入缴费人或参保人姓名"></nut-input>
                    </div>
                 </div>
                 <div class={styles.card_row_box}>
                    <div class={styles.card_row_left_box}>
                       <span>证件类型</span>
                    </div>
                    <div class={styles.card_row_right_box}>
                        <div class={styles.card_title_box}>
                          <span onClick={()=>{
                            state.show = true;
                          }}>{state.cardType}</span>
                        </div>
                    </div>
                 </div>
                 <div class={styles.card_row_box}>
                    <div class={styles.card_row_left_box}>
                       <span>证件号码</span>
                    </div>
                    <div class={styles.card_row_right_box}>
                      <nut-input border={false} placeholder="请输入证件号码"></nut-input>
                    </div>
                 </div>
                 <div class={styles.btn_box}>查询</div>
              </div>
          </div>
          <nut-picker  v-model:visible={state.show} columns={state.columns} title="请选择证件类型" onConfirm={confirm} onCancel={()=>{
               state.show = false;
             }}>
          </nut-picker>
      </div>
    )
  }
})